<template>
    <div class="box-coupon-page" @click="handleToCoupon">
        <div class="box-header">
            <div class="text-coupon">领券中心</div>
            <img class="icon-arrow" :src="Arrow" mode="aspectFill" />
        </div>

        <div class="box-wrap">
            <div class="box-item">
                <div class="box-img">
                    <img
                        class="img"
                        src="https://img1.baidu.com/it/u=2044833022,3762569909&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                        mode="aspectFill"
                    />
                </div>
                <div class="box-right">
                    <div class="cloumn-row">
                        <div class="baseinfo">
                            <div class="full-reduction">xx店铺券 满100-50</div>
                            <div class="date">2023-11-24 分过期</div>
                        </div>
                        <div class="btn">去使用</div>
                    </div>
                    <div class="illustrate">使用说明:</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup >
import Arrow from '@/assets/images/icons/arrow-right.png'
import { useRouter } from 'vue-router'
const router = useRouter()
const handleToCoupon = () => {
    // uni.navigateTo({
    //     url: '/minePages/couponCollection/index'
    // })
    router.push('/mine-couponCollection')
}
</script>
<style scoped lang="scss">
.box-coupon-page {
    min-height: 100vh;
    width: 100%;
    background: rgb(243, 243, 243);
    .box-header {
        height: 4rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        box-sizing: border-box;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon-arrow {
            width: 1.8rem;
            height: 1.8rem;
        }
    }
    .box-wrap {
        display: flex;
        margin-top: 2rem;

        .box-img {
            width: 8rem;
            height: 8rem;
            margin-right: 1.5rem;
            .img {
                width: 100%;
                height: 100%;
                border-radius: 1rem;
            }
        }
        .box-item {
            width: 100%;
            display: flex;
            border-radius: 1rem;
            // height: 120px;
            padding-top: 1rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-bottom: 1rem;
            background: #fff;
            box-sizing: border-box;
            .box-right {
                width: calc(100% - 7rem);
                .cloumn-row {
                    display: flex;
                    align-items: center;

                    justify-content: space-between;
                    .baseinfo {
                        .full-reduction {
                            font-size: 1.4rem;
                            color: #333;
                        }
                        .date {
                            font-size: 1.2rem;
                            color: #999;
                            margin-top: 1rem;
                        }
                    }
                    .btn {
                        background: rgb(199, 128, 110);
                        width: 4.8rem;
                        height: 1.8rem;
                        font-size: 1.2rem;
                        line-height: 1.8rem;
                        color: #fff;
                        text-align: center;
                        border-radius: 1rem;
                    }
                }
                .illustrate {
                    margin-top: 1rem;
                    font-size: 1.2rem;
                    color: #999;
                }
            }
        }
    }
}
</style>
